<template>
  <view class="register">
    <view class="con">
      <!-- 品牌标识区域 -->
      <image src="@/static/logo.png" />

      <!-- 注册表单 -->
      <view class="login-form">
        <view :class="['item', errorTips==1 ? 'error' : '']">
          <view class="account">
            <text class="input-icon">📱</text>
            <text class="input-label">账号</text>
            <input
              type="text"
              data-type="account"
              placeholder-class="inp-placeholder"
              placeholder="请输入账号名称"
              @input="getInputVal"
            >
          </view>
          <view v-if="errorTips==1" class="error-text">
            <text class="warning-icon">!</text>
            请输入账号！
          </view>
        </view>

        <view :class="['item', errorTips==2 ? 'error' : '']">
          <view class="account">
            <text class="input-icon">🔒</text>
            <text class="input-label">密码</text>
            <input
              :type="showPassword ? 'text' : 'password'"
              data-type="password"
              placeholder-class="inp-placeholder"
              placeholder="请输入密码"
              @input="getInputVal"
            >
            <text class="password-toggle" @tap="togglePasswordVisibility">{{ showPassword ? '🙈' : '👁️' }}</text>
          </view>
          <view v-if="errorTips==2" class="error-text">
            <text class="warning-icon">!</text>
            请输入密码！
          </view>
        </view>

        <view class="operate">
          <view class="to-login" @tap="toLogin">
            已有账号？去登录
          </view>
        </view>
      </view>

      <!-- 操作按钮 -->
      <view class="btn-group">
        <button class="authorized-btn" @tap="toRegister">注册</button>
        <button class="to-idx-btn" @tap="toIndex">回到首页</button>
      </view>

      <!-- 版权信息 -->
      <view class="copyright">
        Copyright © 2023
      </view>
    </view>
  </view>
</template>

<script setup>
import { encrypt } from '@/utils/crypto.js'
import { ref } from 'vue'

// 密码可见性控制
const showPassword = ref(false)
const togglePasswordVisibility = () => {
  showPassword.value = !showPassword.value
}

// 页面显示时设置导航栏标题
onShow(() => {
  uni.setNavigationBarTitle({ title: '用户注册' })
})

// 表单数据
const principal = ref('') // 账号
const credentials = ref('') // 密码
const errorTips = ref(0) // 输入错误提示: 1账号输入 2密码输入

// 获取输入值
const getInputVal = (e) => {
  const type = e.currentTarget.dataset.type
  if (type === 'account') {
    principal.value = e.detail.value
  } else if (type === 'password') {
    credentials.value = e.detail.value
  }
}

// 注册处理
const toRegister = () => {
  if (!principal.value) {
    errorTips.value = 1
  } else if (!credentials.value) {
    errorTips.value = 2
  } else {
    errorTips.value = 0
    uni.showLoading()
    http.request({
      url: '/user/register',
      method: 'post',
      data: {
        userName: principal.value,
        passWord: encrypt(credentials.value)
      }
    }).then(() => {
      uni.hideLoading()
      uni.showToast({ title: '注册成功，请登录', icon: 'none', duration: 1500 })
      setTimeout(() => {
        uni.navigateTo({ url: '/pages/accountLogin/accountLogin' })
      }, 1800)
    })
  }
}

// 跳转到登录页
const toLogin = () => {
  uni.navigateTo({ url: '/pages/accountLogin/accountLogin' })
}

// 回到首页
const toIndex = () => {
  uni.switchTab({ url: '/pages/index/index' })
}
</script>

<style lang="scss" scoped>
@import "./register.scss";
</style>
